import { CardDescription, CardTitle } from "@/components/ui/card";
import type { RouteMatch } from "@/types/route";
import { useTranslation } from "react-i18next";
import { useMatches } from "react-router-dom";

interface FormHeadProps {
  title?: string;
  description?: string;
}

export default function FormHead({ title, description }: FormHeadProps) {
  const matches = useMatches() as RouteMatch[];
  const currentMatch = matches[matches.length - 1];

  if (!title) {
    title = currentMatch?.handle?.title || "";
  }
  if (!description) {
    description = currentMatch?.handle?.description || "";
  }

  const { t } = useTranslation();

  return (
    <>
      <CardTitle className="text-2xl font-bold">
        {t(title, { defaultValue: title })}
      </CardTitle>
      <CardDescription>
        {t(description, { defaultValue: description })}
      </CardDescription>
    </>
  );
}
